<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="/css/element/index.css" />
  <link rel="stylesheet" href="/css/font-awesome.min.css">
  <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/element/index.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/ajax/libs/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/common/js/ms-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
  #app {
    margin: -10px auto;
  }

  .el-table .cell {
    white-space: nowrap;
  }

  .block {
    margin: 5px 50px;
  }

  .el-table {
    font-size: 12px;
    width: 100%;
  }

  .work_table thead {
    color: #676a6c;
    font-size: 13px;
    font-weight: normal !important;
  }

  .work_table thead:hover {
    background-color: #eff3f8;
  }

  .el-table th {
    background-color: #eff3f8;
  }

  .el-table tr:hover {
    background-color: #f5f5f5;
  }

  .hover-row {
    background-color: #f5f5f5 !important;
  }

  th {
    font-weight: normal !important;
  }

  .el-table td,
  .el-table th {
    padding: 8px 0;
  }

  .list-table {
    width: 98%;
    background: #fff;
    border-radius: 6px;
    margin: 0 auto;
    margin-top: 20px;
    /* padding-top: 5px; */
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    max-height: 500px;
    overflow: auto;
  }

  .list-table2 {
    width: 98%;
    background: #fff;
    border-radius: 6px;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  }

  ::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
  }

  ::-webkit-scrollbar-track {
    background-color: #F5F5F5;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #999;
  }
</style>

<body>
  <div id="app">
    <div class="list-table">
      <el-button type="primary" size="mini" style="margin: 15px 0px 0 10px;" @click="add"><i class="fa fa-plus"></i> 添加
      </el-button>
      <!-- <el-button type="danger" size="mini" :disabled="multipleSelection.length==0" @click="del"><i
          class="fa fa-remove"></i> 删除</el-button> -->
    </div>

    <div class="list-table2">
      <el-table ref="multipleTable" :show-overflow-tooltip="false" class="work_table" id="mailInfo" @row-click="toInfo"
        :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="30"> </el-table-column> -->
        <el-table-column prop="id" label="工单ID" width="150">
        </el-table-column>
        <el-table-column prop="sender" label="发件人">
        </el-table-column>
        <el-table-column prop="scriptName" label="脚本名称">
        </el-table-column>
        <el-table-column prop="status" label="任务状态">
        </el-table-column>
        <el-table-column prop="runs" label="运行次数">
        </el-table-column>
        <el-table-column prop="validTime" label="有效期" width="300">
        </el-table-column>
        <el-table-column prop="sendTime" label="提交时间" width='160'>
        </el-table-column>
        <el-table-column prop="realStartTime" label="开始执行时间" width='160'>
        </el-table-column>
        <el-table-column prop="realEndTime" label="结束执行时间" width='160'>
        </el-table-column>

      </el-table>
      <div class="block">

        <el-pagination @current-change="handleCurrentChange" :current-page="cur_page" :page-sizes="[1, 2, 3, 4]"
          :page-size="pageNum" layout="prev, pager, next" :total="totalCount">
        </el-pagination>
      </div>
    </div>

  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data: {
      cur_page: 1, //默认在第一页
      pageNum: 8, //默认每页显示5条数据
      totalCount: 8, //默认总条数为5条
      tableData: [],
      searchTable: [],
      multipleSelection: [],
      getUserList: []
    },
    created() {
      this.getList();
    },
    mounted() {},
    methods: {

      getList() {
        axios
          .post("/xman/etlMail/list")
          .then(response => {
            // console.log("22222222222", response);
            this.tableData = response.data.rows;
            this.searchTable = this.tableData;
            this.totalCount = this.searchTable.length;
            if (this.tableData.length >= this.pageNum) {
              var arr = [];
              for (let i = 0; i < this.pageNum; i++) {
                arr.push(this.tableData[i]);
              }
              this.tableData = arr;
            }

            axios
              .get("/xman/etlMail/userList")
              .then(response => {
                this.getUserList = response.data.data;
                for (let i = 0; i < this.tableData.length; i++) {
                  const item = this.tableData[i];
                  if (item.status == 0) {
                    item.status = "未发送";
                  } else if (item.status == 1) {
                    item.status = "已发送";
                  } else if (item.status == 2) {
                    item.status = "发送失败";
                  } else if (item.status == 3) {
                    item.status = "运行中";
                  } else if (item.status == 4) {
                    item.status = "已结束";
                  }

                  if (item.sendTime == null) {
                    item.sendTime = "";
                  } else {
                    item.sendTime = this.timeChange(item.sendTime * 1000);
                  }
                  if (item.planningStartTime == null) {
                    item.planningStartTime = "";
                  } else {
                    item.planningStartTime = this.timeChange(item.planningStartTime * 1000);
                  }
                  if (item.planningEndTime == null) {
                    item.planningEndTime = "";
                  } else {
                    item.planningEndTime = this.timeChange(item.planningEndTime * 1000);
                  }
                  if (item.realStartTime == null) {
                    item.realStartTime = "";
                  } else {
                    item.realStartTime = this.timeChange(item.realStartTime * 1000);
                  }
                  if (item.realEndTime == null) {
                    item.realEndTime = "";
                  } else {
                    item.realEndTime = this.timeChange(item.realEndTime * 1000);
                  }
                  if (item.planningStartTime != "" && item.planningEndTime != "") {
                    item.validTime = item.planningStartTime + " 到 " + item.planningEndTime
                  } else {
                    item.validTime = ""
                  }
                  if (item.realStartTime != "" && item.realEndTime != "") {
                    item.execute = item.realStartTime + "到" + item.realEndTime
                  } else {
                    item.execute = ""
                  }

                  for (let i = 0; i < this.getUserList.length; i++) {
                    const user = this.getUserList[i];
                    if (item.sender == user.id) {
                      item.sender = user.displayName
                    }
                  }
                }
                this.tableData.sort(function (a, b) {
                  return Date.parse(b.sendTime.replace(/-/g, "/")) - Date.parse(a.sendTime.replace(/-/g,
                    "/"));
                });

              })
              .catch(function (error) {
                console.log(error);
              });

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      timeChange(time) {
        var item = new Date(time);
        return (
          item.toLocaleDateString().replace(/\//g, "-") +
          " " +
          item.toTimeString().substr(0, 8)
        );
      },

      toInfo(row) {
        $.modal.openFull("详情", "etlMail/detail?id=" + row.id);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log("this.multipleSelection", this.multipleSelection);
      },
      add() {
        $.modal.openFull("添加", "etlMail/add");
      },
      del() {
        var param = new FormData();
        for (let i = 0; i < this.multipleSelection.length; i++) {
          const itemId = this.multipleSelection[i];
          // console.log("itemId", itemId.id);
          param.append("id", itemId.id);
        }
        axios
          .post("/xman/etlMail/remove", param)
          .then(response => {
            // console.log("response", response);

            location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      removal(array) {
        var temp = []; //一个新的临时数组
        for (var i = 0; i < array.length; i++) {
          if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i]);
          }
        }
        return temp;
      },
      handleCurrentChange(val) {
        // console.log('显示页数', val);
        var that = this;
        this.cur_page = val;
        // console.log('显示页数', val);
        that.tableData = that.searchTable;
        var arr = [];
        // var num=Math.ceil(this.formTable.length/this.pageNum);
        if (val * that.pageNum <= that.tableData.length) {
          for (let i = (val - 1) * that.pageNum, l = val * that.pageNum; i < l; i++) {
            arr.push(that.tableData[i])
          }
        } else {
          for (let i = (val - 1) * that.pageNum, l = that.tableData.length; i < l; i++) {
            arr.push(that.tableData[i])
          }
        }
        that.tableData = arr;

      }
    }
  });
</script>

<!-- <script type="text/javascript">
  function add() {
    $.modal.openFull("添加", "etlMail/add");
  }
</script> -->

</html>